<template>
  <view class="content">
    <view class="list">
      <view class="list-item" @click="go(item)" v-for="(item, index) in list">
        <img :src="item.image" />
        <view class="tag flex">
          <!-- <u-tag
            size="mini"
            text="真品保障"
           
            color="#FFF"
            bg-color="#000"
            icon="integral"
          ></u-tag> -->
          <img v-if="item.zhenpin == 1" src="@/assets/zp.png" alt="" />
          <!-- <u-tag
            size="mini"
            text="一手货源"
           
            color="#0192FC"
            border-color="#0192FC"
            bg-color="#FFF"
            plain
            icon="integral"
          ></u-tag> -->
          <img v-if="item.yihsou == 1" src="@/assets/ys.png" alt="" />
        </view>
        <p class="name">{{ item.name }}</p>
        <view class="price fbetween">
          <text class="money"
            >¥
            <text>{{ item.price }}</text>
            /吨
          </text>
          <text class="num">月{{ item.stock }}吨</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      // list: [{}, {}, {}, {}, {}, {}, {},]
    };
  },
  methods: {
    go(e) {
      uni.navigateTo({ url: "/pages/buy/supplyDetails?id=" + e.id });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.content {
  .list {
    width: 100%;
    column-count: 2; // 定义三列
    column-gap: 30rpx;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    // 列与列的距离为20px

    .list-item {
      // display: inline-block;
      break-inside: avoid;
      // width: 330rpx;
      // color: #131313;
      // font-size: 24rpx;
      // font-weight: 700;
      .name {
        margin-top: 22rpx;
        font-size: 24rpx;
        font-weight: 700;
        width: 100%;
        overflow: hidden; /* 确保超出容器的文本被隐藏 */
        white-space: nowrap; /* 防止文本换行 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }
      .tag {
        // gap: 20rpx;
        img {
          margin: 20rpx 0;
          width: 122rpx;
          height: 32rpx;
        }
      }

      .price {
        margin: 20rpx 0;

        .money {
          font-size: 20rpx;
          font-weight: 500;

          text {
            font-size: 32rpx;
            font-weight: 700;
          }
        }
      }

      .num {
        color: #686868;
        font-weight: 400;
        font-size: 20rpx;
      }

      img {
        width: 100%;
        // height: auto;
        border-radius: 12rpx;
      }
    }
  }
}
</style>
